<template>
  <div id="login" v-title data-title="登录 - For Fun">
    <div class="night">
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
    </div>

    <!-- 登录框容器，应用了圆角样式 -->
    <div class="me-login-box me-login-box-radius">

      <!-- 登录框的标题 -->
      <h1>Blog 登录</h1>

      <!-- 使用 Element UI 的表单组件 -->
      <el-form ref="userForm" :model="userForm" :rules="rules">

        <!-- 用户名输入框 -->
        <el-form-item prop="account">
          <!-- 用户名输入框，绑定到 userForm.account -->
          <el-input placeholder="用户名" v-model="userForm.account"></el-input>
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <!-- 密码输入框，类型为密码框，绑定到 userForm.password -->
          <el-input placeholder="密码" type="password" v-model="userForm.password"></el-input>
        </el-form-item>

        <!-- 登录按钮，样式大小为小，点击时触发 login 方法 -->
        <el-form-item size="small" class="me-login-button">
          <!-- 点击按钮时，调用 login 方法，并传入 'userForm' 作为参数，@click.native.prevent 用于阻止默认行为 -->
          <el-button type="primary" @click.native.prevent="login('userForm')">登录</el-button>
        </el-form-item>
      </el-form>

      <!-- 设计信息区域，显示设计者信息 -->
      <div class="me-login-design">
        <p>Designed by
          <strong>
            <!-- 路由链接，点击后跳转到首页，带有特殊样式 -->
            <router-link to="/" class="me-login-design-color">安师大麦克斯韦方程组</router-link>
          </strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {max: 10, message: '不能大于10个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {max: 10, message: '不能大于10个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login(formName) {
      let that = this

      this.$refs[formName].validate((valid) => {
        if (valid) {

          that.$store.dispatch('login', that.userForm).then(() => {
            that.$router.go(-1)
          }).catch((error) => {
            if (error !== 'error') {
              that.$message({message: error, type: 'error', showClose: true});
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

#login {
  min-width: 100%;           /* 设置元素的最小宽度为 100%，确保元素至少与视口宽度相同 */
  min-height: 100%;          /* 设置元素的最小高度为 100%，确保元素至少与视口高度相同 */
  background-color: #151514; /* 设置背景颜色为暗灰色 (#151514) */
  height: 100vh;             /* 设置元素的高度为 100% 的视口高度 (viewport height)，即填满整个视口 */
  overflow: hidden;          /* 隐藏任何超出容器的内容，避免滚动条出现 */
  display: flex;             /* 使用 Flexbox 布局模型，便于对齐内容 */
  font-family: "Anton", sans-serif; /* 设置字体为 Anton 字体，备选字体为 sans-serif */
  justify-content: center;   /* 将子元素在水平方向上居中 */
  align-items: center;       /* 将子元素在垂直方向上居中 */
}

.me-login-box h1 {
  text-align: center;        /* 将标题文本水平居中对齐 */
  font-size: 24px;           /* 设置标题字体大小为 24 像素 */
  margin-bottom: 20px;       /* 设置标题底部外边距为 20 像素，确保标题和下面的内容之间有间距 */
  vertical-align: middle;    /* 设置标题的垂直对齐方式为居中，通常与行内元素配合使用 */
  color: #fff;               /* 设置标题文字颜色为白色 (#fff) */
}


.me-login-design {
  text-align: center;         /* 将文本水平居中对齐 */
  font-family: 'Open Sans', sans-serif; /* 设置字体为 'Open Sans'，如果没有则使用系统的无衬线字体 */
  font-size: 18px;            /* 设置字体大小为 18 像素，使文字适中且可读 */
  color: #fff;                /* 设置文本颜色为白色 (#fff)，使文字在深色背景上更突出 */
}


.me-login-design-color {
  color: #fff !important; /* 确保链接颜色也为白色 */
}


.me-login-box {
  position: absolute;  /* 将元素的定位方式设置为绝对定位，使其相对于最近的定位父元素定位 */
  width: 300px;        /* 设置登录框的宽度为 300 像素 */
  height: 260px;       /* 设置登录框的高度为 260 像素 */
  background-color: white;  /* 设置背景颜色为白色 */
  margin-top: 0px;     /* 设置登录框顶部外边距为 0 像素，确保没有额外的上边距 */
  margin-left: -180px; /* 将登录框左侧外边距设置为 -180 像素，通常用于调整元素的位置 */
  left: 50%;           /* 设置登录框的左边距为容器宽度的 50%，实现水平居中 */
  padding: 30px;       /* 设置登录框内边距为 30 像素，使得内容不会紧贴边缘 */
}

/* 设置登录框的圆角 */
.me-login-box-radius {
  border-radius: 10px; /* 边角圆滑，半径为10px */

  /* 添加阴影效果 */
  box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
  /*
   * 水平偏移：0px
   * 垂直偏移：0px
   * 模糊半径：1px
   * 阴影扩展：1px
   * 阴影颜色：rgba(161, 159, 159, 0.1)，即浅灰色且透明度为10%
   */

  /* 设置背景色为半透明的黑色 */
  background-color: rgba(0, 0, 0, 0.5);
  /* rgba(0, 0, 0, 0.5)表示黑色，并且透明度为50% */
}


/* 设置登录框标题（h1）的样式 */
.me-login-box h1 {

  /* 使标题文字水平居中 */
  text-align: center; /* 将文字对齐方式设置为居中 */

  /* 设置标题文字的字体大小 */
  font-size: 24px; /* 字体大小为24px */

  /* 设置标题底部的外边距 */
  margin-bottom: 20px; /* 在标题下方留出20px的间距 */

  /* 设置标题的垂直对齐方式 */
  vertical-align: middle; /* 垂直对齐中间。通常用于内联或内联块元素 */
}


/* 设置登录框设计相关的文本样式 */
.me-login-design {

  /* 将文本水平居中对齐 */
  text-align: center; /* 将文本内容在容器内水平居中 */

  /* 设置文本的字体为 'Open Sans'，如果该字体不可用则使用默认 sans-serif 字体 */
  font-family: 'Open Sans', sans-serif; /* 字体优先选择 'Open Sans'，否则回退至 sans-serif 系统字体 */

  /* 设置文本的字体大小为18px */
  font-size: 18px; /* 字体大小设为18px，适合普通的文本显示 */
}


/* 设置登录框设计相关文本的颜色 */
.me-login-design-color {

  /* 设置文本颜色为白色，并使用 !important 强制应用此样式 */
  color: #ffffff !important; /* 将文本颜色设置为白色 (#ffffff)，并且使用 !important 确保该样式优先应用 */
}


/* 设置登录按钮的样式 */
.me-login-button {

  /* 将登录按钮内的文本或内容水平居中 */
  text-align: center; /* 使按钮内的文本或子元素水平居中 */
}


/* 设置登录按钮内的按钮元素的宽度 */
.me-login-button button {

  /* 将按钮的宽度设置为100%，使其填满父容器的宽度 */
  width: 100%; /* 设置按钮的宽度为其父元素宽度的100% */
}

/* 设置具有 .night 类的元素的样式 */
.night {

  /* 设置元素的定位方式为相对定位，使其可以相对于自身位置进行调整 */
  position: relative; /* 使用相对定位，允许元素相对于其正常位置进行偏移 */

  /* 设置元素的宽度为100%，使其填满父容器的宽度 */
  width: 100%; /* 宽度为100% */

  /* 设置元素的高度为父容器的200%，使其高度是父容器的两倍 */
  height: 200%; /* 高度是父元素的两倍，即200% */

  /* 对元素进行旋转，旋转角度为139度 */
  transform: rotateZ(139deg); /* 使用 transform 属性将元素绕 Z 轴旋转139度 */
}



.shooting_star {
  /* 设置元素的定位方式为绝对定位 */
  position: absolute;

  /* 设置元素在水平方向上的位置为父元素宽度的 50%（居中） */
  left: 50%;

  /* 设置元素在垂直方向上的位置为父元素高度的 50%（居中） */
  top: 50%;

  /* 设置元素的高度为 2px */
  height: 2px;

  /* 设置背景为线性渐变，颜色从 #5f91ff 渐变到透明的蓝色 */
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));

  /* 设置元素的圆角，使其成为一个圆形的形状，宽高比很大，效果接近于线条 */
  border-radius: 999px;

  /* 添加滤镜效果，给元素添加蓝色的阴影，阴影的模糊半径为 6px */
  filter: drop-shadow(0 0 6px #699bff);

  /* 使用 Webkit 动画（兼容浏览器），让元素有尾迹动画（tail）和流星动画（shooting） */
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;

  /* 定义标准 CSS 动画，同样设置尾迹动画（tail）和流星动画（shooting） */
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}



.shooting_star::before {
  /* 使用伪元素 ::before 创建流星的尾巴效果 */
  content: "";

  /* 设置伪元素的定位方式为绝对定位 */
  position: absolute;

  /* 设置伪元素在垂直方向上的位置，计算方式是从父元素中心偏移 2px */
  top: calc(50% - 1px * 2); /* 50% - 2px，确保尾巴的位置在主元素中心 */

  /* 设置伪元素在水平方向上的位置为右对齐，即贴在父元素的右侧 */
  right: 0;

  /* 设置伪元素的高度为 2px，确保它与主元素的高度一致 */
  height: 2px;

  /* 设置伪元素的背景为线性渐变，创建一个从透明到蓝色再回到透明的效果 */
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));

  /* 通过 transform 属性，将伪元素水平平移 50% 并旋转 45 度，形成流星尾巴的角度效果 */
  transform: translateX(50%) rotateZ(45deg);

  /* 设置伪元素的边角为圆形，模拟流星尾巴的弯曲效果 */
  border-radius: 100%;

  /* 使用 Webkit 动画（兼容性处理），让伪元素具有闪烁效果，动画周期为 3000ms（3秒） */
  -webkit-animation: shining 3000ms ease-in-out infinite;

  /* 使用标准 CSS 动画，实现伪元素的闪烁效果 */
  animation: shining 3000ms ease-in-out infinite;
}




.shooting_star::after {
  /* 使用伪元素 ::after 创建流星尾巴的另一个部分 */
  content: "";

  /* 设置伪元素的定位方式为绝对定位 */
  position: absolute;

  /* 设置伪元素的垂直位置，计算偏移量确保其对齐到主元素的中心 */
  top: calc(50% - 1px * 2); /* 50% - 2px，确保尾巴位置在主元素的中心 */

  /* 设置伪元素在水平方向上与父元素右对齐 */
  right: 0;

  /* 设置伪元素的高度为 2px，与主元素保持一致 */
  height: 2px;

  /* 设置伪元素的背景为线性渐变，从透明到蓝色再回到透明，模拟流星尾巴的效果 */
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));

  /* 通过 transform 属性，使伪元素平移 50% 并旋转 45 度，以形成尾巴的角度效果 */
  transform: translateX(50%) rotateZ(45deg);

  /* 设置伪元素的边角为圆形，使尾巴弯曲呈现流星效果 */
  border-radius: 100%;

  /* 使用 Webkit 动画（兼容性处理），使伪元素闪烁，动画周期为 3000ms */
  -webkit-animation: shining 3000ms ease-in-out infinite;

  /* 使用标准 CSS 动画，创建伪元素闪烁效果 */
  animation: shining 3000ms ease-in-out infinite;

  /* 第二个 transform 属性，平移和旋转伪元素，使其旋转 -45 度，形成反向的尾巴效果 */
  transform: translateX(50%) rotateZ(-45deg);
}




.shooting_star:nth-child(1) {
  /* 设置该流星元素的垂直位置，计算方式为：50%（父元素的中心）减去 -4px 乘以 2 */
  /* 由于 -4px 乘以 2 结果为 -8px，最终效果是将流星从垂直中心向上偏移 8px */
  top: calc(50% - -4px * 2);

  /* 设置该流星元素的水平位置，计算方式为：50%（父元素的中心）减去 248px */
  /* 结果是将流星向左偏移 248px，相对于父元素中心 */
  left: calc(50% - 248px);

  /* 设置该流星的动画延迟时间，为 3060 毫秒（3.06秒） */
  /* 这意味着该流星将在其他流星之后延迟 3060ms 开始动画 */
  -webkit-animation-delay: 3060ms;

  /* 设置该流星的标准动画延迟时间，也为 3060ms */
  /* 该属性确保动画在指定的时间后开始运行 */
  animation-delay: 3060ms;
}




.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after {
  /* 设置伪元素（::before 和 ::after）的动画延迟时间为 3060 毫秒（3.06秒） */
  /* 这意味着这些伪元素的动画将会在其他流星元素之后的 3060ms 开始 */
  -webkit-animation-delay: 3060ms;  /* 兼容 WebKit 浏览器的动画延迟 */
  animation-delay: 3060ms;  /* 标准的动画延迟时间 */
}


.shooting_star:nth-child(2) {
  /* 设置元素的顶部位置，使其垂直居中并向上偏移360px (180px * 2) */
  top: calc(50% - 180px * 2);

  /* 设置元素的左侧位置，使其水平居中并向左偏移166px */
  left: calc(50% - 166px);

  /* 设置元素的动画延迟时间，使用 Webkit 浏览器引擎的前缀 */
  -webkit-animation-delay: 4693ms;

  /* 设置元素的动画延迟时间 */
  animation-delay: 4693ms;
}


.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after {
  /* 设置伪元素 ::before 和 ::after 的动画延迟时间，使用 Webkit 浏览器引擎的前缀 */
  -webkit-animation-delay: 4693ms;

  /* 设置伪元素 ::before 和 ::after 的动画延迟时间 */
  animation-delay: 4693ms;
}


.shooting_star:nth-child(3) {
  /* 设置元素的顶部位置，使其垂直居中并向上偏移 -176px (-88px * 2) */
  top: calc(50% - -88px * 2);

  /* 设置元素的左侧位置，使其水平居中并向左偏移136px */
  left: calc(50% - 136px);

  /* 设置元素的动画延迟时间，使用 Webkit 浏览器引擎的前缀 */
  -webkit-animation-delay: 1178ms;

  /* 设置元素的动画延迟时间 */
  animation-delay: 1178ms;
}


.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after {
  /* 设置伪元素 ::before 和 ::after 的动画延迟时间，使用 Webkit 浏览器引擎的前缀 */
  -webkit-animation-delay: 1178ms;

  /* 设置伪元素 ::before 和 ::after 的动画延迟时间 */
  animation-delay: 1178ms;
}


.shooting_star:nth-child(4) {
  /* 设置元素的顶部位置，使其垂直居中并向上偏移 184px (92px * 2) */
  top: calc(50% - 92px * 2);

  /* 设置元素的左侧位置，使其水平居中并向左偏移 92px */
  left: calc(50% - 92px);

  /* 设置元素的动画延迟时间，使用 Webkit 浏览器引擎的前缀 */
  -webkit-animation-delay: 9285ms;

  /* 设置元素的动画延迟时间 */
  animation-delay: 9285ms;
}


/* 设置第4个流星的动画延迟时间 */
.shooting_star:nth-child(4)::before,
.shooting_star:nth-child(4)::after {
  /* 延迟9285毫秒后开始动画 */
  -webkit-animation-delay: 9285ms; /* 适配webkit内核浏览器 */
  animation-delay: 9285ms; /* 普通浏览器的动画延迟 */
}


/* 设置第5个流星的位置和动画延迟时间 */
.shooting_star:nth-child(5) {
  /* 设置流星的垂直位置，calc计算方式：50%位置减去两个89px的值 */
  top: calc(50% - 89px * 2); /* 50%是父元素的高度，减去两个89px */

  /* 设置流星的水平位置，calc计算方式：50%位置减去92px */
  left: calc(50% - 92px); /* 50%是父元素的宽度，减去92px */

  /* 延迟5475毫秒后开始动画，适配webkit内核浏览器 */
  -webkit-animation-delay: 5475ms;

  /* 延迟5475毫秒后开始动画，适配普通浏览器 */
  animation-delay: 5475ms;
}


/* 设置第5个流星的伪元素动画延迟时间 */
.shooting_star:nth-child(5)::before,
.shooting_star:nth-child(5)::after {
  /* 延迟5475毫秒后开始动画，适配webkit内核浏览器 */
  -webkit-animation-delay: 5475ms;

  /* 延迟5475毫秒后开始动画，适配普通浏览器 */
  animation-delay: 5475ms;
}


/* 设置第6个流星的位置和动画延迟时间 */
.shooting_star:nth-child(6) {
  /* 设置流星的垂直位置，calc计算方式：50%位置加上两个-164px的值（注意负号） */
  top: calc(50% - -164px * 2); /* 50%是父元素的高度，两个负的164px相当于向下偏移328px */

  /* 设置流星的水平位置，calc计算方式：50%位置减去27px */
  left: calc(50% - 27px); /* 50%是父元素的宽度，减去27px，使流星稍微向左偏移 */

  /* 延迟9220毫秒后开始动画，适配webkit内核浏览器 */
  -webkit-animation-delay: 9220ms;

  /* 延迟9220毫秒后开始动画，适配普通浏览器 */
  animation-delay: 9220ms;
}


/* 设置第6个流星的伪元素动画延迟时间 */
.shooting_star:nth-child(6)::before,
.shooting_star:nth-child(6)::after {
  /* 延迟9220毫秒后开始动画，适配webkit内核浏览器 */
  -webkit-animation-delay: 9220ms;

  /* 延迟9220毫秒后开始动画，适配普通浏览器 */
  animation-delay: 9220ms;
}


.shooting_star:nth-child(7) {
  top: calc(50% - -136px * 2);
  left: calc(50% - 243px);
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(7)::before,
.shooting_star:nth-child(7)::after {
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(8) {
  top: calc(50% - 174px * 2);
  left: calc(50% - 75px);
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(8)::before,
.shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(9) {
  top: calc(50% - 138px * 2);
  left: calc(50% - 281px);
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(9)::before,
.shooting_star:nth-child(9)::after {
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(10) {
  top: calc(50% - 25px * 2);
  left: calc(50% - 25px);
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(10)::before,
.shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(11) {
  top: calc(50% - 184px * 2);
  left: calc(50% - 198px);
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(11)::before,
.shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(12) {
  top: calc(50% - -194px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(12)::before,
.shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(13) {
  top: calc(50% - 169px * 2);
  left: calc(50% - 42px);
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(13)::before,
.shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(14) {
  top: calc(50% - -114px * 2);
  left: calc(50% - 139px);
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(14)::before,
.shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(15) {
  top: calc(50% - 140px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(15)::before,
.shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(16) {
  top: calc(50% - 72px * 2);
  left: calc(50% - 88px);
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(16)::before,
.shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(17) {
  top: calc(50% - 40px * 2);
  left: calc(50% - 273px);
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(17)::before,
.shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(18) {
  top: calc(50% - 176px * 2);
  left: calc(50% - 27px);
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(18)::before,
.shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(19) {
  top: calc(50% - -164px * 2);
  left: calc(50% - 229px);
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(19)::before,
.shooting_star:nth-child(19)::after {
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(20) {
  top: calc(50% - 85px * 2);
  left: calc(50% - 161px);
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(20)::before,
.shooting_star:nth-child(20)::after {
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(21) {
  top: calc(50% - 100px * 2);
  left: calc(50% - 300px);
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

.shooting_star:nth-child(21)::before,
.shooting_star:nth-child(21)::after {
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@-webkit-keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}

@keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}
</style>
